'use client'
import { useRouter } from 'next/navigation'
import React, { use, useEffect, useState } from 'react'
import { toast } from 'sonner'

export default function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const [detail, setDetail] = useState<{ name: string, content: string }>()
  const router = useRouter()

  useEffect(() => {
    const load = async () => {
      const res = await fetch('http://localhost:3000/api/user/' + id, {
        method: 'GET',
      })
      const { code, data, msg } = await res.json()
      if (code !== 0) {
        toast(msg)
        return
      }
      setDetail(data)
    }
    load()
  }, [id])

  return (
    <div className='w-screen h-screen fixed top-0 left-0 bg-gray-500/50' onClick={() => router.back()}>
      <div className='container mx-auto bg-white mt-32 text-center rounded-2xl p-8'>
        <div className='text-5xl'>{detail?.name}</div>
        <div className='mt-8'>{detail?.content}</div>
      </div>
    </div>
  )
}
